<template>
	<view>
		<view class="zhanwei"></view>
		<view class="list_item flex1">
			<view class="list_item_left">
				收货人
			</view>
			<input type="text" class="list_item_input" v-model="form.name" placeholder="请填写收货人姓名" placeholder-style="color: #CCC;">
		</view>
		<view class="list_item flex1">
			<view class="list_item_left">
				手机号
			</view>
			<input type="text" class="list_item_input" v-model="form.mobile" placeholder="请填写收货人手机号" placeholder-style="color: #CCC;">
		</view>
		<view class="list_item flex" @click="toggleTab">
			<view class="list_item_left">
				所在区域
			</view>
			<input type="text" class="list_item_input" v-model="quyu" placeholder="请选择省/市/区" placeholder-style="color: #CCC;">
			<u-icon name="arrow-right" color="#333333" size="13"></u-icon>
		</view>
		<view class="list_item1 flex padding_bottom">
			<view class="list_item_left">
				详细地址
			</view>
			<input type="text" class="list_item_input" v-model="form.address" placeholder="请输入街道地址" placeholder-style="color: #CCC;">
			<view class="list_item1_roght flex1" @click="choose_address">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/dingwei.png" class="list_item_left_icon" mode=""></image>
				<view class="list_item_left_right_text" > 
					定位
				</view>
			</view>
		</view>
		<view class="list_item flex mar20">
			<view class="list_item_left">
				设为默认地址
			</view>
			<u-switch v-model="value" @change="change" size="18" inactiveColor="#D1D1D6"></u-switch>
		</view>
		<view class="btn" @click="Add">
			保存
		</view>
		<!-- 弹框 -->
		<uni-popup ref="cityPhonePop" type="bottom">
			<view class="popup">
				<view class="picker-btn">
					<view class="left" @click="cancel">取消</view>
					<view class="right" @click="confirm">确定</view>
				</view>
				<picker-view style="height: 400rpx;" :indicator-style="indicatorStyle" :value="valueArr" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in province" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="province[valueArr[0]]">
						<view class="item" v-for="(item,index) in province[valueArr[0]].children" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="province[valueArr[0]]">
						<view class="item" v-for="(item,index) in province[valueArr[0]].children[valueArr[1]].children" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { addressAdd, options } from '../../../api/common.js';
	import uniPopup from '../../../uni_modules/uni-popup/components/uni-popup/popup.js'
	export default {
		data() {
			return {
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				valueArr: [0, 0, 0], // 用于判断当前滑动的是哪一列
				province: [], // 数据列表
				form:{
					name: '',
					mobile: '',
					province: '',
					city:'',
					area:'',
					address:'',
					is_default: this.value == false?0:1
				},
				quyu:'',
				value: true,
				data:{},
				pro:'',
				ci:'',
				are:'',
				optiones:[],
			}
		},
		onLoad(op) {
			if(op.data){
				this.data = JSON.parse(op.data);
				this.form = this.data;
				this.quyu = this.data.province_text + this.data.city_text + this.data.area_text;
			}
		},
		mounted() {
			this.getOption();
		},
		methods: {
			confirm(){
				this.quyu = this.pro + this.ci + this.are;
				this.$refs.cityPhonePop.close();
			},
			toggleTab() {
				this.$refs.cityPhonePop.open();
			},
			cancel() {
				this.$refs.cityPhonePop.close();
			},
			getOption(){
				options().then(res=>{
					if(res.code == 200001){
						this.province = res.data;
						this.loadCity(this.province[0])
					}
				})
			},
			bindChange(e) {
				const val = e.detail.value;
				if (this.valueArr[0] !== val[0]) {
					this.loadCity(this.province[val[0]])
				} else if (this.valueArr[1] !== val[1]) {
					this.loadArea(this.province[val[0]].children[val[1]])
				} else if (this.valueArr[2] !== val[2]) {
					this.form.area = this.province[val[0]].children[val[1]].children[val[1]].code;
					this.are = this.province[val[0]].children[val[1]].children[val[1]].name;
				}
				this.valueArr = val
			},
			loadCity(parentId) {
				this.form.province = parentId.code;
				this.pro = parentId.name;
				const params = {
					province: parentId.code
				}
	
				options(params).then(res => {
					if (res.code == 200001) {
						if (this.province[this.valueArr[0]].children === undefined) {
							this.$set(this.province[this.valueArr[0]], 'children', [])
							res.data.forEach(item => {
								this.province[this.valueArr[0]].children.push(item)
							})
							this.loadArea(this.province[this.valueArr[0]].children[this.valueArr[1]])
						}
					}
				})
			},
			loadArea(parentId) {
				this.form.city = parentId.code;
				this.ci = parentId.name;
				const params = {
					city: parentId.code
				}
				options(params).then(res => {
					if (res.code == 200001) {
						if (this.province[this.valueArr[0]].children[this.valueArr[1]].children === undefined) {
							this.$set(this.province[this.valueArr[0]].children[this.valueArr[1]], 'children', [])
							res.data.forEach(item => {
								this.province[this.valueArr[0]].children[this.valueArr[1]].children.push(item)
							})
							this.form.area = this.province[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[1]].code;
							this.are = this.province[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[1]].name;
						}
					}
				})
			},
			Add(){
				if(Object.keys(this.data).length>0){
					addressAdd(this.form).then(res=>{
						if(res.code == 200001){
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
							uni.navigateTo({
								url: '/pages/MyAddress/MyAddress'
							})
						}else{
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}else{
					addressAdd(this.form).then(res=>{
						if(res.code == 200001){
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
							uni.navigateTo({
								url: '/pages/MyAddress/MyAddress'
							})
						}else{
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}
			},
			choose_address(){
				let t = this;
				uni.chooseLocation({
					type: 'gcj02', 
					success: function (res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						t.form.address = res.address;
						// uni.openLocation({
						// 	latitude: latitude,
						// 	longitude: longitude,
						// 	success: function (res) {
						// 		console.log(res,'===res')
						// 		this.form.address = res;
						// 		console.log('success');
						// 	}
						// });
					}
				});
			},
			
			change(e){
				console.log(e,'===e')
				this.value = e;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F4F4F8;
	}
	.popup {
		height: fit-content;
		// height: 400rpx;
		width: 750rpx;
		background: #fff;
	}
	
	.picker-btn {
		display: flex;
		height: 100upx;
		width: 100%;
		line-height: 100upx;
		background: #fff;
		font-size: 34upx;
		z-index: 1;
		border-bottom: 1rpx solid #f8f8f8;
	
		.left {
			flex: 1;
			color: #0076FF;
			padding-left: 40upx;
			box-sizing: border-box;
		}
	
		.right {
			flex: 1;
			text-align: right;
			padding-right: 40upx;
			color: #FE4533;
			box-sizing: border-box;
		}
	}
	
	picker-view {
		width: 100%;
		height: 500rpx;
		display: relative;
	}
	.item {
		line-height: 100rpx;
		text-align: center;
	}
.zhanwei{
	width: 100%;
	height: 22rpx;
}
.list_item{
	width: 100%;
	height: 104rpx;
	background-color: #fff;
	padding: 0 30rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid #F4F4F4;
}
.list_item1{
	width: 100%;
	background-color: #fff;
	box-sizing: border-box;
	padding: 30rpx 30rpx 90rpx 30rpx;
	
}
.list_item_left{
	width: 170rpx;
	color: #222;
	font-family: Source Han Sans SC;
	font-size: 26rpx;
	font-weight: 400;
}
.list_item_input{
	width: 400rpx;
	color: #000;
	font-family: Source Han Sans SC;
	font-size: 26rpx;
	font-weight: 400;
}
.list_item_left_right_text{
	color: #333;
	text-align: right;
	font-family: Source Han Sans SC;
	font-size: 24rpx;
	font-weight: 400;
}
.list_item_left_icon{
	width: 22rpx;
	height: 22rpx;
	margin-top: 3rpx;
}
.list_item1_roght{
	/* width: 150rpx; */
}
.mar20{
	margin-top: 20rpx;
}
.btn{
	width: 686rpx;
	height: 80rpx;
	border-radius: 40rpx;
	background: #0165FB;
	text-align: center;
	line-height: 80rpx;
	margin: 0 auto;
	margin-top: 60rpx;
	color: #fff;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 400;
}
</style>
